import { Alert, Authenticator, Tabs } from '@aws-amplify/ui-react';
import { Example } from '@/components/Example';

<Alert role="none" heading="Zero Configuration">

The Authenticator [automatically infers](/connected-components/authenticator#step-1-configure-backend) `loginMechanisms` from `amplify pull`,
but can be explicitly defined as seen below.

</Alert>

By default, the Authenticator creates new users in the Amazon Cognito UserPool based on a unique `username`, `email` or `phone_number`.

> **Note**: A `username`, `email`, or `phone_number` value is required for Cognito User Pools.

<Tabs.Container defaultValue="Email">
  <Tabs.List>
    <Tabs.Item value="Email">Email</Tabs.Item>
    <Tabs.Item value="Phone Number">Phone Number</Tabs.Item>
    <Tabs.Item value="Username">Username</Tabs.Item>
  </Tabs.List>
  <Tabs.Panel value="Email">
    ```jsx expoSnack
    <Authenticator.Provider>
      <Authenticator loginMechanisms={['email']}>
        <SignOutButton />
      </Authenticator>
    </Authenticator.Provider>
    ```
  </Tabs.Panel>
  <Tabs.Panel value="Phone Number">
    ```jsx expoSnack
    <Authenticator.Provider>
      <Authenticator loginMechanisms={['phone_number']}>
        <SignOutButton />
      </Authenticator>
    </Authenticator.Provider>
    ```
  </Tabs.Panel>
    <Tabs.Panel value="Username">
    Note: Configuring sign in with `username` is not supported by Amplify Gen2 backends
    
    ```jsx expoSnack
    <Authenticator.Provider>
      <Authenticator loginMechanisms={['username']}>
        <SignOutButton />
      </Authenticator>
    </Authenticator.Provider>
    ```
  </Tabs.Panel>
</Tabs.Container>
